<template>
  <el-scrollbar ref="majorScroll">
    <div id="majorLibrary">
      <div class="main">
        <!-- nav -->
        <div class="df curpoin nav-box">
          <div
            class="item-box"
            @click="handleNavClick('1')"
            :class="{ activenav: active === '1' }"
          >
            本科专业
          </div>
          <div
            class="item-box"
            style="margin: 0 15px"
            @click="handleNavClick('2')"
            :class="{ activenav: active === '2' }"
          >
            专科专业
          </div>
        </div>
        <div v-loading="loading">
          <!-- 专科本科nav -->
          <majorNav
            :majorsList="majorsList"
            @handleNavScorll="handleNavScorll"
            ref="majorNavRef"
          />
          <!-- 搜索框 -->
          <!-- <searchinput /> -->
          <!-- 列表 -->
          <div style="display: flex">
            <majorsListTable
              :majorsList="majorsList"
              :majorType="majorType"
              @handleScroll="handleScroll"
              @handleListScroll="handleListScroll"
              ref="majorsListTableRef"
            />
            <div style="margin: 15px 0 0 40px">
              <hotList :hostDataList="hostDataList" type="3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue';
import { getAllMajor } from '@/api/selectSubject/subject';
import majorNav from './components/MajorNav';
import { getHotMajor } from '@/api/majorLibrary/majorLibrary';
import majorsListTable from './components/MajorsList';
import imgUrl from '@/assets/images/hotMajor.png';
import hotList from '@/components/HotList';
const loading = ref(false);
const active = ref('1');
const requestData = ref({
  majorsBK: 1,
  deep: 3,
});
const majorScroll = ref(null);
const majorsListTableRef = ref(null);
const majorType = ref('');
const majorsList = ref([]);

const hostDataList = ref({
  title: '报考热度排名',
  hotList: [],
  imgUrl: imgUrl,
});
// 热门学校请求数据
const hotcollegeReqData = ref({
  page: 1,
  pageSize: 10,
});
const fetchHotMajor = () => {
  getHotMajor(hotcollegeReqData.value).then((res) => {
    if (res.data.code == 20000) {
      res.data.data.forEach((v) => {
        v.hits = v.hits / 10000;
        v.hits = v.hits.toFixed(1);
      });
      hostDataList.value.hotList = res.data.data;
    }
  });
};

const handleNavScorll = (index) => {
  majorsListTableRef.value.handleTitleNav(index);
};
const handleScroll = (scroll) => {
  let subtraction = 0;
  if (active.value == 1) {
    subtraction = 100;
  } else if (active.value == 2) {
    subtraction = 200;
  }
  majorScroll.value.scrollTo({ top: scroll - subtraction, behavior: 'smooth' });
};
const handleListScroll = (scroll) => {
  let subtraction = 0;
  if (active.value == 1) {
    subtraction = 100;
  } else if (active.value == 2) {
    subtraction = 200;
  }
  majorScroll.value.scrollTo({ top: scroll - subtraction, behavior: 'smooth' });
};
const majorNavRef = ref(null);
const handleNavClick = (type) => {
  majorsListTableRef.value.handleClearCurrentIndex();
  // majorType.valye = type
  majorNavRef.value.handleClearActive();
  active.value = type;
  majorsListTableRef.value.handleClearIptVal();
  if (type == 2) {
    localStorage.setItem('level', 'zhuanke');
    delete requestData.value.majorsZK;
    requestData.value.majorsZK = 1;
    fetchAllMajor();
  } else {
    localStorage.setItem('level', 'benke');
    delete requestData.value.majorsBK;
    requestData.value.majorsBK = 1;
    fetchAllMajor();
  }
};

const fetchAllMajor = () => {
  loading.value = true;
  getAllMajor(requestData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        loading.value = false;
        if (active.value == 1) {
          majorsList.value = res.data.data.majorsBK;
          majorType.value = '1';
        } else {
          majorsList.value = res.data.data.majorsZK;
          majorType.value = '2';
        }
        majorsList.value.allCount = 0;
        majorsList.value.forEach((item) => {
          item.count = 0;
          item.majors.forEach((v) => {
            item.count += v.childCount || 0; // 累加子项的 childCount，如果 childCount 不存在则视为 0
          });
          majorsList.value.allCount += item.count; // 将 item.count 累加到 allCount 上
        });
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
localStorage.setItem('level', 'benke');
fetchHotMajor();
fetchAllMajor();
</script>

<style lang="scss" scoped>
#majorLibrary {
  height: 100%;
  flex: 1;
  margin-top: 20px;
  .nav-box {
    border-bottom: 1px solid var(--color-text);
    .item-box {
      padding: 10px 30px;
      // border-radius: 4px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
}
.activenav {
  background: var(--color-text);
  color: #fff;
}
</style>
